<template>
	<view>
		<navBar title="余额明细"></navBar>
		<view class="top-bg"></view>
		<view class="content">
			<picker mode="date" fields="month" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="select">
					<text>{{date}}</text>
					<image class="icon-img" :src="bg_image.down"></image>
				</view>
			</picker>
			<view v-if="list.length">
				<view class="balance-panel" v-for="item in list" :key="item.id">
					<view class="title">
						{{item.money?item.money:0}}元
					</view>
					<view class="info">
						<text class="left">{{item.createTime || ''}} |{{item.type|filterType}}</text>
						<text class="right"
							:class="{'orange':item.incomeExpense===2}">{{item.incomeExpense===1?'+':'-'}}{{item.money || 0}}</text>
						<!-- <text class="right orange">+5.00</text> -->
					</view>
				</view>
			</view>
			<view class="page-result" v-else>
				<image class="page-result-icon" :src="bg_image.balanceResult"></image>
				<view class="page-result-msg">暂无数据</view>
			</view>
			<uni-load-more v-if="list.length" :status="status" :content-text="contentText"
				@clickLoadMore="clickLoadMore" />
		</view>
	</view>
</template>

<script>
	import balance from './js/balance'
	
	import uniLoadMore from './components/uni-load-more/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
		  uniLoadMore
		},
		...balance 
	}
</script>

<style lang="less" scoped>
	@import url('./css/balance.less');
</style>